<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1322088_i5vs0r41499.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<style type="text/css">
		.container-fluid{
			overflow-y: auto;
		}
	</style>
	<body>
		<div class="container-fluid bg-white">
			<div class="goods-class">
				<div class="gc-header"><button @click="showAddClassModel" class="btn btn-info" type="button">新增</button></div>
				<div class="gc-item-box">
					<ul class="mp00">
						<li class="list-none" v-for="(item,index) in classList" :key="index">
							<div class="list-box flex">
								<div @click="showMainClass($event)" class="left-box"><i class="iconfont icon-dakai"></i><span>{{item.name}}</span></div>
								<div class="right-box">
									<div class=" flex">
										<div @click="addMainClass(item)" class="right-box-btn"><i class="iconfont icon-tianjia"></i><span>新增子类</span></div>
										<div @click="eidtClass(item)" class="right-box-btn"><i class="iconfont icon-xiugai"></i><span>修改</span></div>
										<div @click="IstopClass(item)" class="right-box-btn"><i class="iconfont icon-zhiding"></i><span>置顶</span></div>
										<div @click="deleteClass(item)" class="right-box-btn"><i class="iconfont icon-delete"></i><span>删除</span></div>
									</div>
								</div>
							</div>
							<div class="show-main-list">
								<ul class="mp00">
									<li class="list-none" v-for="(item1,ins) in item.mainList">
										<div class="list-box flex">
											<div @click="showMainClass($event)" class="left-box"><i class="iconfont icon-dakai"></i><span>{{item1.name}}</span></div>
											<div class="right-box">
												<div class=" flex">
													<div @click="addMainClass(item1)" class="right-box-btn"><i class="iconfont icon-tianjia"></i><span>新增子类</span></div>
													<div @click="eidtClass(item1)" class="right-box-btn"><i class="iconfont icon-xiugai"></i><span>修改</span></div>
													<div @click="IstopClass(item1)" class="right-box-btn"><i class="iconfont icon-zhiding"></i><span>置顶</span></div>
													<div @click="deleteClass(item1)" class="right-box-btn"><i class="iconfont icon-delete"></i><span>删除</span></div>
												</div>
											</div>
										</div>
										<div class="show-main-list">
											<ul class="mp00">
												<li class="list-none" v-for="(item2,ins) in item1.mainList">
													<div class="list-box flex">
														<div @click="showMainClass($event)" class="left-box"><i class="iconfont icon-dakai"></i><span>{{item2.name}}</span></div>
														<div class="right-box">
															<div class=" flex">
																<div @click="addMainClass(item2)" class="right-box-btn"><i class="iconfont icon-tianjia"></i><span>新增子类</span></div>
																<div @click="eidtClass(item2)" class="right-box-btn"><i class="iconfont icon-xiugai"></i><span>修改</span></div>
																<div @click="IstopClass(item2)" class="right-box-btn"><i class="iconfont icon-zhiding"></i><span>置顶</span></div>
																<div @click="deleteClass(item2)" class="right-box-btn"><i class="iconfont icon-delete"></i><span>删除</span></div>
															</div>
														</div>
													</div>
													<div class="show-main-list">
														<ul class="mp00">
															<li class="list-none" v-for="(item3,ins) in item2.mainList">
																<div class="list-box flex">
																	<div @click="showMainClass($event)" class="left-box"><i class="iconfont icon-dakai"></i><span>{{item3.name}}</span></div>
																	<div class="right-box">
																		<div class=" flex">
																			<div @click.stop="addMainClass(item3)" class="right-box-btn"><i class="iconfont icon-tianjia"></i><span>新增子类</span></div>
																			<div @click="eidtClass(item3)" class="right-box-btn"><i class="iconfont icon-xiugai"></i><span>修改</span></div>
																			<div @click="IstopClass(item3)" class="right-box-btn"><i class="iconfont icon-zhiding"></i><span>置顶</span></div>
																			<div @click="deleteClass(item3)" class="right-box-btn"><i class="iconfont icon-delete"></i><span>删除</span></div>
																		</div>
																	</div>
																</div>
															</li>
														</ul>
													</div>
												</li>
											</ul>
										</div>
									</li>
								</ul>
							</div>
						</li>
					</ul>
				</div>
				
				
				<div class="add-model" v-if="showAddModel">
					<div @click="closeAddModel" class="closeModel"></div>
					<div class="am-box">
						<div class="am-h height40">新增商品分类</div>
						<div class="am-b">
							<div class="in-box-text flex"><span>分类名称</span><input type="text" class="form-controls" value="" /></div>
							<div class="in-box-text flex"><span>上级分类</span><input type="text" disabled class="form-controls" value="根类别" /></div>
						</div>
						<div class="am-f height40">
							<button @click="closeAddModel" type="button">取消</button>
							<button type="button">确定</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script src="js/jquery-v3-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var height = document.documentElement.clientHeight;
				console.log(height);
				$(".container-fluid").css({"height":(height-34)+"px"})
			})
			
			$(window).resize(function(){
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(height-67)+"px"})
			})
			
			var vm = new Vue({
				el:".goods-class",
				data:{
					showAddModel:false,
					classList:[
						{
							id:"01",
							name:"手机数码",
							superior:"",
							mainList:[
								{
									id:"001",
									name:"笔记本电脑",
									superiorId:"01",
									superior:"手机数码",
									mainList:[
										{
											id:"0001",
											name:"华为电脑",
											superiorId:"001",
											superior:"手机数码",
											mainList:[
												{
													id:"0001",
													name:"华为电脑32",
													superiorId:"001",
													superior:"手机数码",
													
												}
											]
										}
									]
								},
								{
									id:"002",
									name:"手机",
									superiorId:"01",
									superior:"手机数码",
									mainList:[
										{
											id:"0001",
											name:"小米",
											superiorId:"001",
											superior:"手机数码",
										}
									]
								}
							]
						},
						{
							id:"02",
							name:"服装鞋包",
							superior:"",
							mainList:[
								{
									id:"001",
									name:"男装",
									superiorId:"01",
									superior:"手机数码",
									mainList:[
										{
											id:"0001",
											name:"华为电脑",
											superiorId:"001",
											superior:"手机数码",
										}
									]
								},
								{
									id:"002",
									name:"女装",
									superiorId:"01",
									superior:"手机数码",
									mainList:[
										{
											id:"0001",
											name:"小米",
											superiorId:"001",
											superior:"手机数码",
										}
									]
								}
							]
						}
					]
				},
				methods:{
					showMainClass(e){
						$(e.currentTarget).parent().next().slideToggle(100)
					},
					showAddClassModel(){
						this.showAddModel = true;
					},
					closeAddModel(){
						this.showAddModel = false;
					},
					addMainClass(item){
						//this.showAddClassModel()
						console.log(item.id);
						for(i = 0;i<this.classList.length;i++){
							if(this.classList[i].id == item.id){
								console.log("一"+this.classList[i].id);
								this.classList[i].mainList.push({
									id:"001",
									name:"笔记本电脑",
									superiorId:"01",
									superior:"手机数码"
								})
							}else{
								for (u = 0;u<this.classList[i].mainList.length;u++) {
									if(this.classList[i].mainList[u].id == item.id){
										console.log("二"+this.classList[i].id);
										this.classList[i].mainList.push({
											id:"001",
											name:"笔记本电脑",
											superiorId:"01",
											superior:"手机数码"
										})
									}
								}
							}
						}
					},
					deleteClass(item){
						console.log(item);
					},
					eidtClass(item){
						console.log(item);
					},
					IstopClass(item){
						console.log(item);
					}
				}
			})

		</script>
	</body>
</html>
